<template>
	<!--拼团-->
	<div class="pt-main">
		<div class="pt-title-goback">
			拼团
			<div @click="goBack">
				<img src="../../image/icon_return.png" />
			</div>
		</div>
		<div class="pt-goods">
			<div class="pt-goods-cover">
				<img src="../../img/12.png" />
			</div>
			<div class="pt-goods-name">
				德国博朗欧乐B/oral-b电动牙刷成人充电式清洁自动 D12 013W亮杰
			</div>
			<div class="pt-goods-price">
				<span class="pt-goods-group-price">￥<span>234</span></span>
				<span class="pt-goods-group-priced">299元</span>
			</div>
		</div>
		<div class="pt-join-ground">
			<div class="pt-ground-minge">
				等待成团，仅剩<span>1</span>个名额
			</div>
			<div class="pt-join-captain-and-other">
				<div class="pt-join-captain-head">
					<img src="../../img/captain-headicon.png" />

				</div>
				<div class="pt-join-member-head">
					<img src="../../image/bg_photo_spelt.png" />
				</div>
				<span class="pt-join-captain-chengwei">团长</span>
			</div>
			<div class="pt-time-remaining">
				<!--剩余时间-->
				剩余
				<div class="pt-time-remaining-hour">12</div>
				<span>:</span>
				<div class="pt-time-remaining-minute">00</div>
				<span>:</span>
				<div class="pt-time-remaining-second">10</div>结束
			</div>
 		<div class="pt-group-join-now" v-on:click="toggle(1)">
				立即参加
			</div>
		</div>
		<!--这个部分是弹出部分-->
		<div class="pt-tanchukuang" v-if="willShow" @click="toggle(0)"></div>
		<!--白色背景的团购商品选项区域-->
		<div class="pt-upup">
			<div class="box_top">
				<div class="pt-upup-goods-cover">
					<img src="../../img/12.png" />
				</div>
				<div class="pt-goods-price pt-upup-goods-price">
					<span class="pt-goods-group-price">￥<span>234</span></span>
					<span class="pt-goods-group-priced">299元</span>
				</div>
				<div class="pt-upup-close" v-on:click="toggle(0)"></div>
				<div class="pt-upup-goods-title">请选择规格，颜色，数量</div>
			</div>

			<div class="box_scroll">
				<!--规格选择-->
				<div class="pt-upup-chose-size">
					<div class="pt-upup-chose-size-title">规格选择:</div>
					<div class="pt-upup-chose-size-list">
						<label>
							<input type="radio" value="标配清洁型刷头1只" v-model="goodsSize">
							<i>
								标配清洁型刷头1只
							</i>
						</label>
						<label>
							<input type="radio" value="标配清洁型刷头2只" v-model="goodsSize">
							<i>
								标配清洁型刷头2只
							</i>
						</label>
						<label>
							<input type="radio" value="标配清洁型刷头3只" v-model="goodsSize">
							<i>
								标配清洁型刷头3只
							</i>
						</label>
						<label>
							<input type="radio" value="标配清洁型刷头3只" v-model="goodsSize">
							<i>
								标配清洁型刷头3只
							</i>
						</label>
						<label>
							<input type="radio" value="标配清洁型刷头3只" v-model="goodsSize">
							<i>
								标配清洁型刷头3只
							</i>
						</label>
					</div>
				</div>
				<div class="pt-upup-chose-color">
					<div class="pt-upup-chose-color-title">颜色选择:</div>
					<div class="pt-upup-chose-color-list">
						<label>
							<input type="radio" value="白色" v-model="goodsColor">
							<i>
								白色
							</i>
						</label>
						<label>
							<input type="radio" value="绿色" v-model="goodsColor">
							<i>
								绿色
							</i>
						</label>
						<label>
							<input type="radio" value="绿色" v-model="goodsColor">
							<i>
								绿色
							</i>
						</label>
						<label>
							<input type="radio" value="绿色" v-model="goodsColor">
							<i>
								绿色
							</i>
						</label>
						<label>
							<input type="radio" value="绿色" v-model="goodsColor">
							<i>
								绿色
							</i>
						</label>
					</div>
				</div>
				<div class="pt-upup-goods-nums">
					<div class="pt-upup-goods-nums-title">数量:</div>
					<div class="pt-upup-goods-nums-box">
						<div class="pt-upup-goods-nums-add" v-on:click="changGoodNum(1)">+</div>
						<div class="pt-upup-goods-nums-show">{{goodsNum}}</div>
						<div class="pt-upup-goods-nums-minus" v-on:click="changGoodNum(0)">-</div>
					</div>
				</div>
			</div>

			<router-link to="/shoppingcart" class="box_bottom">
				<div class="pt-upup-join-groung-now">
					立即参团
				</div>
			</router-link>

		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				willShow:false,
				goodsSize: '标配清洁型刷头1只' , //选中规格
				goodsColor: '白色',  // 选中颜色
				goodsNum: 0,  // 选中数量
			}
		},
		created() {

		},
		methods:{
			goBack() {
				this.$router.back();
			},
			toggle(status) {  //status 0隐藏 1显示
				if(status) {
					this.willShow=true;
					$(".pt-upup").addClass("up").removeClass("down");
				}else {
					this.willShow=false;
					$(".pt-upup").addClass("down").removeClass("up");
				}

			},
			changGoodNum(status) { //status 0减 1加
				if(status) {
					this.goodsNum ++;
				}else {
					if(this.goodsNum <= 0) {
						this.goodsNum==0;
					}else {
						this.goodsNum --;
					}
				}
			}
		}
	}

	var numsshow=1;
	$(".pt-upup-goods-nums-show").html(numsshow);
	var timeRemaining = [12, 0, 10];
	clearInterval(abc);
	var abc = setInterval(function countdown() {
		timeRemaining[2] = timeRemaining[2] - 1;
		if(timeRemaining[2] == -1) {
			timeRemaining[2] = 59;
			timeRemaining[1] = timeRemaining[1] - 1;
			if(timeRemaining[1] == -1) {
				timeRemaining[1] = 59;
				timeRemaining[0] = timeRemaining[0] - 1;
				if(timeRemaining[0] == -1) {
					timeRemaining[0] = 0;
				}
			}
		}
		for(var i = 0; i < 3; i++) {
			$(".pt-time-remaining div").eq(i).html(timeRemaining[i]);
			if(timeRemaining[i] < 10) {
				$(".pt-time-remaining div").eq(i).html("0" + timeRemaining[i]);
			}
		}
	}, 1000)
</script>
<style>

</style>